<!--
 * @Author: wangshuguang
 * @Date: 2022-02-21 16:53:38
 * @LastEditTime: 2022-09-22 13:18:13
 * @LastEditors: wangshuguang
 * @Description: 支付结果页面
-->

<template>
  <div class="openAccountResult">
    <HeaderComp title="支付结果" :showLeftIcon='false'  :rightIconCallback="toHome">
      <template #rightContent>
        <span class="rightIcon">完成</span>
      </template>
    </HeaderComp>
    <!-- 头部信息 -->
    <div class="head" v-if="form.payAmount">
      <img v-if="isSuccess" src="../../assets/img/flow/resultSuc.png" alt="">
      <img v-else src="../../assets/img/flow/resultErr.png" alt="">
      <div class="headLabel">{{ isSuccess ? '支付成功' : '支付失败' }}</div>
    </div>
    <div class="formInfo" v-if="form.payAmount">
      <!-- 支付信息 -->
      <van-form validate-first readonly input-align="right" label-width="120">
        <van-field v-show="!isSuccess" :value="form.failRemark" label="失败原因" rows='1' autosize type="textarea" />
        <van-field :value="form.payAmount" label="支付金额"/>
        <van-field :value="form.buyFlowBalance" label="购买流量余额"/>
        <van-field :value="payType[form.payType]" label="支付方式"/>
        <van-field :value="form.payTranNo" label="支付单号" rows='1' autosize type="textarea" />
      </van-form>
      <!-- 订单信息 -->
      <van-form v-if="isSuccess" readonly validate-first input-align="right" label-width="120" class="orderForm">
        <van-field :value="form.pkgTempName" label="订阅套餐"/>
        <van-field :value="form.comboTotalCost" label="套餐费用合计"/>
        <van-field :value="form.comboBaseCost" label="套餐基础费用"/>
        <van-field :value="form.manyShopCost" label="多门店费用"/>
        <van-field :value="form.surplusFlow" label="预计剩余流量余额"/>
      </van-form>
    </div>
    <div class="backBtn" @click="toHome">返回</div>
    <div class="loading" v-show="loading" @click="loading = false">
      <van-loading size="24px" vertical color="#FFB72F">支付结果查询中...</van-loading>
    </div>
  </div>
</template>

<script>
import { 
  queryWapAliStatus, 
  upOpenMerchStatusFail
} from "@/api/flow/index";
import { mapGetters } from "vuex";
export default {
  data(){
    return {
      getOrdetTimer: null,
      getOrdetTimerNum: 0,
      loading: true,
      form: {
        name: '张三'
      },
      payType:{
        "WALL":'  账户余额',
        "ZFB":'  支付宝',
      },
      result:{
        status: '2'
      }
    }
  },
  mounted(){
    const { payType, out_trade_no, total_amount, trade_no } = this.$route.query
    
    const { merchantId } = this.flowQueryData
    this.loading = true
    console.log('payType',payType)
    if(payType && payType == 'WALL'){
      // 钱包余额直接使用url参数展示
      this.form = JSON.parse(JSON.stringify(this.$route.query))
      console.log('this.form',this.form)
      this.loading = false
    }else if(payType == 'ZFBERR'){
      // 支付宝失败回调
      upOpenMerchStatusFail({merchantId}).then(res => {
        console.log('res')
        this.$toast('支付失败')
        this.toHome()
      })
    } else if(out_trade_no){
      // 支付宝
      this.getOrderStatus({
        outTradeNo : out_trade_no, 
        totalAmount: total_amount, 
        tradeNo: trade_no,
        openFlag: 1
      })
    }
  },
  methods:{
    getOrderStatus(queryData){
      clearTimeout(this.getOrdetTimer)
      queryWapAliStatus(queryData).then(res => {
        const { code, data, msg } = res.data
        if(code == 0){
          this.form = {...data}
          this.loading = false
        }else{
          // 超过6次终止轮训
          if(this.getOrdetTimerNum == 6) {
            this.$toast('网络忙，清稍后再试')
            this.loading = false
          }else{
            this.getOrdetTimerNum++
            this.getOrdetTimer = setTimeout(() => {
              this.getOrderStatus(queryData)
            }, 10 * 1000)
          }
        }
      })
    },
    toHome(){
      this.$router.push('/flow')
    }
  },
  computed:{
    ...mapGetters(['flowQueryData']),
    isSuccess(){
      return this.form.payStatus == 'S'
    }
  }
}
</script>

<style lang='less' scoped>
  .openAccountResult{
    height: 100%;
    .head{
      text-align: center;
      img{
        width: 120px;
        height: 120px;
        margin: 70px 0 50px;
      }
      .headLabel{
        font-size: 34px;
        color: #131313;
        margin-bottom: 87px;
      }
    }
    .formInfo{
      background: #F3F3F3;
    }
    .orderForm{
      margin-top: 20px;
    }
    .backBtn{
      width: 600px;
      margin: 40px auto 0;
      height: 80px;
      line-height: 80px;
      background: #FFB72F;
      border-radius: 40px;
      font-size: 32px;
      font-weight: 500;
      color: #FFFFFF;
      text-align: center;
    }
    .loading{
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background: rgb(209 187 187 / 10%);
      z-index: 1000;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
</style>